const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { LoaderOptionsPlugin } = require("webpack");
const { VueLoaderPlugin } = require("vue-loader");
const Dotenv = require("dotenv-webpack");

const publicPath = path.resolve(__dirname, "public");

module.exports = (env, argv) => {
  console.log("env", env);
  console.log("argv", argv);

  return {
    mode: argv.mode,
    entry: {
      main: {
        import: "./src/main.js",
        filename: "assets/js/[name].js?hash=[fullhash]",
      },
      ejsPage: {
        import: "./src/js/ejs-page.js",
        filename: "assets/js/[name].js?hash=[fullhash]",
      },
    },
    output: {
      filename: "[name]?hash=[fullhash]",
      chunkFilename: "assets/chunks/js/[name].js?hash=[fullhash]",
      assetModuleFilename: "assets/modules/[hash][ext][query][fragment]",
      path: path.resolve(__dirname, "dist"),
      clean: true,
    },
    resolve: {
      // roots: [publicPath],
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    plugins: [
      new Dotenv({
        path:
          argv.mode === "production"
            ? "./.env.production"
            : "./.env.development",
        prefix: "import.meta.env.",
      }),
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        filename: "ejs-page.html",
        template: "src/pages/ejs-page.ejs",
        minify: false,
        chunks: ["main", "ejsPage"],
      }),
      new CopyPlugin({
        patterns: [{ from: "public", to: "" }],
      }),
      new MiniCssExtractPlugin({
        filename: "assets/css/[name].css?hash=[hash]",
        chunkFilename: "assets/chunk2/[id].css?hash=[hash]",
      }),
      new LoaderOptionsPlugin({
        options: {
          posthtml(ctx) {
            return {
              parser: require("posthtml-pug"),
              plugins: [require("posthtml-bem")()],
            };
          },
        },
      }),
    ],
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: "vue-loader",
        },
        {
          test: /\.m?js$/i,
          exclude: /(node_modules|bower_components)/,
          use: [
            // "thread-loader",
            {
              loader: "babel-loader",
            },
          ],
        },
        {
          test: /\.css$/i,
          use: [
            // "style-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            "postcss-loader",
          ],
        },
        {
          test: /\.scss$/i,
          use: [
            // "style-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            "postcss-loader",
            "sass-loader",
          ],
        },
        {
          test: /\.ejs$/i,
          use: [
            {
              loader: "html-loader",
              options: {
                sources: {
                  list: ["..."],
                  urlFilter(attr, value) {
                    return !/^\//.test(value);
                  },
                },
                minimize: {
                  // removeComments: true,
                },
              },
            },
            {
              loader: "template-ejs-loader",
              options: {},
            },
            // {
            //   loader: "ejs-compiled-loader",
            //   options: {
            //     htmlmin: true,
            //     htmlminOptions: {
            //       removeComments: true,
            //     },
            //   },
            // },
          ],
        },
        // {
        //   test: /\.html$/i,
        //   type: "asset/resource",
        //   generator: {
        //     filename: "[name][ext]",
        //   },
        // },
        {
          test: /\.html$/i,
          use: [
            {
              loader: "html-loader",
              options: {
                sources: {
                  list: ["..."],
                  urlFilter(attr, value) {
                    return !/^\//.test(value);
                  },
                },
                minimize: {
                  // removeComments: true,
                },
                // esModule: false,
              },
            },
            // "posthtml-loader",
          ],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          type: "asset/resource",
        },
      ],
    },
    optimization: {
      minimize: false,
      runtimeChunk: {
        name: "assets/chunks/js/runtime.js",
      },
      splitChunks: {
        cacheGroups: {
          chunks: {
            chunks: "all",
            filename: "assets/chunks/js/[name].js?hash=[fullhash]",
          },
        },
      },
    },
    devServer: {
      static: "./dist",
      watchFiles: ["public", "src"],
    },
    devtool: "source-map",
  };
};
